<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
     <script th:src="@{/js/echarts.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>关系图DEMO</title>
</head>
<body>
    <p th:text="'Hello, ' + ${list} + '!'" />
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<script th:inline="javascript">//引用
   /*<![CDATA[ ][*/
	 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();  
        var webkitDep = {  
        "type": "force",  
        "categories": [//关系网类别，可以写多组  
            {  
                "name": "人物关系",//关系网名称  
                "keyword": {},  
                "base": "人物关系"  
            }  
        ],  
        "nodes": [//展示的节点  
            {  
                "name": "A",//节点名称  
                "category": 0//与关系网类别索引对应，此处只有一个关系网所以这里写0  
            },  
            {  
                "name": "B",  
                "category": 0  
            },  
            {  
                "name": "C",  
                "category": 0  
            }  
        ],  
        "links":/*[[${list}]]*/
    };  
        myChart.hideLoading();  
        console.info(webkitDep.links);
        option = {  
            legend: {  
                data: ['人物关系']//此处的数据必须和关系网类别中name相对应  
            },  
            series: [{  
                type: 'graph',  
                layout: 'force',  
                animation: false,  
                label: {  
                    normal: {  
                        show:true,  
                        position: 'right'  
                    }  
                },  
                draggable: true,  
                data: webkitDep.nodes,  
                categories: webkitDep.categories,  
                force: {  
                    edgeLength: 105,//连线的长度  
                    repulsion: 100  //子节点之间的间距  
                },  
               
                edges: webkitDep.links  
            }]  
        };  
        
        myChart.setOption(option); 
   /*]]>*/
</script>
</html>